<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Font</title>
    <style>
        .main {
            width: 1200px;
            border: 1px solid red;
            margin: 30px auto;
        }

        .main .color1 {
            color: #6665E1;
        }

        .main .color2 {
            color: deeppink;
        }

        .main .color3 {
            color: rgb(170, 77, 88);
        }

        .main .color4 {
            color: rgba(66, 77, 88, 0.5);
        }

        .main .normal {
            font-weight: normal;
        }

        .main .bold {
            font-weight: bold;
        }

        .main .bolder {
            font-weight: bolder;
        }

        .main .number_400 {
            font-weight: 400;
        }

        .main .number_600 {
            font-weight: 600;
        }

        .main .number_700 {
            font-weight: 700;
        }

        .main span {
            font-variant: small-caps
        }

        .main .fontNormal {
            font-style: normal
        }

        .main .italic {
            font-style: italic
        }

        .main .oblique {
            font-style: oblique
        }

        .main .percent {
            font-size: 25%; /*按照父亲元素尺寸的25%来进行显示*/
        }

        .main .num {
            font-size: 22px;
        }

        .main .em {
            font-size: 4em;
        }

        .main .rem {
            font-size: 2rem;
        }

        .main .content {
            height: 50px;
            border: 1px solid blue;
        }

        .main .content span {
            line-height: 50px;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="color1">
        十六进制颜色属性
    </div>
    <div class="color2">
        英文名字的颜色属性
    </div>
    <div class="color3">
        rgb的颜色属性
    </div>
    <div class="color4">
        rgba的颜色属性
    </div>
</div>
<div class="main">
    <div class="normal">
        字体粗细的normal属性
    </div>
    <div class="bold">
        字体粗细的bold属性
    </div>
    <div class="bolder">
        字体粗细的bolder属性
    </div>
    <div class="number_400">
        字体粗细的400
    </div>
    <div class="number_600">
        字体粗细的600
    </div>
    <div class="number_700">
        字体粗细的700
    </div>
</div>
<div class="main">
    控制字体的小型的大写字母 <span>i love study qianduan!!</span> AND I LOVE JAVA!!!
</div>
<div class="main">
    <div class="fontNormal">font-style的normal属性</div>
    <div class="italic">font-style的italic属性</div>
    <div class="oblique">font-style的oblique属性</div>
</div>
<div class="main">
    <div class="percent">
        字体大小按照父级百分比的大小显示
    </div>
    <div class="num">
        字体大小按照具体的px像素显示
    </div>
    <div class="em">
        字体大小按照父元素使用字体的大小来显示
    </div>
    <div class="rem">
        字体大小按照根元素html字体大小显示
    </div>
</div>
<div class="main">
    <div class="content">
        <span>行高居中的测试</span>
    </div>
</div>
</body>
</html>